<template>
  <!-- 表格 -->
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="orderDetail[0].imageUrl" label="产品图片">
      <template #default="scope">
        <img :src="scope.row.orderDetail[0].imageUrl" alt="" />
      </template>
    </el-table-column>
    <el-table-column prop="order_id" label="订单编号" />
    <el-table-column prop="orderDetail[0].productName" label="产品名称" />
    <el-table-column prop="orderDetail[0].quantity" label="数量" />
    <el-table-column prop="orderDetail[0].price" label="总价格" />
    <el-table-column prop="create_time" label="创建时间" />
    <el-table-column prop="pay_status" label="支付状态">
      <template #default="scope">
        <b v-if="scope.row.pay_status === 0">未支付</b>
        <b v-else>已支付</b>
      </template>
    </el-table-column>
    <el-table-column prop="order_status" label="订单状态">
      <template #default="scope">
        <b v-if="scope.row.order_status === 1">未提交</b>
        <b v-else-if="scope.row.order_status === 2">提交成功</b>
        <b v-else-if="scope.row.order_status === 3">已取消</b>
        <b v-else-if="scope.row.order_status === 4">交易关闭</b>
        <b v-else-if="scope.row.order_status === 5">退货</b>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="操作" width="180">
      <template #default="scope">
        <el-button
          type="primary"
          :disabled="scope.row.pay_status === 1 || scope.row.order_status === 4"
          @click="handlePay(scope.row.order_id)"
        >
          {{ scope.row.order_status === 1 ? '去支付' : '支付' }}
        </el-button>
        <el-button type="danger">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import * as api1 from '../../../../api/vip';
let router = useRouter();
let tableData = ref([]);

api1.getOrderApi().then((res) => {
  console.log(res);
  tableData.value = res.data.data;
});
//去支付事件
let handlePay = (row) => {
  console.log(row);
  router.push('/pay/payMent?order_id=' + row);
};
</script>
<script>
export default {
  meta: {
    name: '会员管理',
    title: 'vipVipPage',
    icon: '#icon-zhifu'
  }
};
</script>
<style scoped>
.bread {
  margin: 20px;
}
</style>
